<template>
    <view class="date-range-box">
        <qly-date-picker v-model="dateTime.startDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                         @confirm="confirmStart"/>
        <text>至</text>
        <qly-date-picker v-model="dateTime.endDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                         @confirm="confirmEnd"/>
    </view>
</template>
<script setup>
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
    modelValue: {
        default: null
    }
})

const value = useModel(props, 'modelValue')

const dateTime = ref({
    startDate: null,
    endDate: null
})

watch(() => value.value, (newV, oldV) => {
    if (newV) {
        dateTime.value = newV
    } else {
        value.value = {
            startDate: null,
            endDate: null
        }
    }
}, {
    immediate: true,
    deep: true
})

// 开始时间确认
const confirmStart = (e) => {
    value.value.startDate = e
}

// 结束时间确认
const confirmEnd = (e) => {
    value.value.endDate = e
}

</script>
<style scoped lang="scss">
.date-range-box {
    display: flex;
    align-items: center;
    gap: 24rpx;
}
</style>
